<template>
  <div class="overview-container">
    <!-- 顶部导航 -->
    <div class="overview-header">
      <router-link to="/" class="home-link">
        <el-icon><HomeFilled /></el-icon>
        主控中心
      </router-link>
      <div class="header-tabs">
        <div v-for="tab in tabs" 
             :key="tab.id"
             class="tab-item"
             :class="{ active: activeTab === tab.id }"
             @click="activeTab = tab.id">
          <el-icon><component :is="tab.icon" /></el-icon>
          {{ tab.label }}
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧园区地图 -->
      <div class="map-section">
        <div class="cyber-card">
          <h3 class="title-glow">
            <el-icon><MapLocation /></el-icon>
            园区三维态势
          </h3>
          <div class="map-container">
            <div class="map-overlay">
              <div v-for="area in mapAreas" 
                   :key="area.id"
                   class="map-marker"
                   :style="markerStyle(area)">
                <div class="pulse-effect"></div>
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div class="tooltip-content">
                      <h4>{{ area.name }}</h4>
                      <p>设备数量: {{ area.devices }}</p>
                      <p>当前状态: <span :style="{color: statusColor(area.status)}">{{ area.status }}</span></p>
                    </div>
                  </template>
                  <div class="marker-core"></div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间核心信息 -->
      <div class="core-section">
        <!-- 安防态势 -->
        <div class="cyber-card security-status">
          <h3 class="title-glow">
            <el-icon><Monitor /></el-icon>
            安防态势感知
            <span class="update-time">最后更新: {{ securityData.updateTime }}</span>
          </h3>
          <div class="status-grid">
            <div v-for="item in securityData.items" 
                 :key="item.id"
                 class="status-item">
              <div class="status-icon" :style="iconStyle(item.status)">
                <el-icon><component :is="item.icon" /></el-icon>
              </div>
              <div class="status-info">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
                <div class="subtext">{{ item.subtext }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 设备健康度 -->
        <div class="cyber-card device-health">
          <h3 class="title-glow">
            <el-icon><Warning /></el-icon>
            设备健康监测
          </h3>
          <div class="health-grid">
            <div class="chart-container">
              <div ref="healthChart" style="height: 280px"></div>
            </div>
            <div class="health-list">
              <div v-for="(device, index) in deviceStatus" 
                   :key="index"
                   class="device-item">
                <div class="device-icon">
                  <el-icon><component :is="device.icon" /></el-icon>
                </div>
                <div class="device-progress">
                  <div class="progress-label">{{ device.name }}</div>
                  <el-progress 
                    :percentage="device.health"
                    :color="healthColor(device.health)"
                    :show-text="false"/>
                </div>
                <div class="health-value" :style="{color: healthColor(device.health)}">
                  {{ device.health }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧实时数据 -->
      <div class="data-section">
        <div class="cyber-card realtime-data">
          <h3 class="title-glow">
            <el-icon><DataLine /></el-icon>
            核心数据流
          </h3>
          <div class="data-stream">
            <div v-for="(stream, index) in dataStreams"
                 :key="index"
                 class="stream-item">
              <div class="stream-label">
                <el-icon><component :is="stream.icon" /></el-icon>
                {{ stream.label }}
              </div>
              <div class="stream-value" :style="{color: stream.color}">
                {{ stream.value }}
                <span class="stream-unit">{{ stream.unit }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="environment-monitor">
          <div class="cyber-card">
            <h3 class="title-glow">
              <el-icon><Cloudy /></el-icon>
              环境监测
            </h3>
            <div class="environment-grid">
              <div v-for="item in environmentData" 
                   :key="item.label"
                   class="environment-item">
                <div class="indicator" :style="{color: item.color}">
                  {{ item.value }}<span class="unit">{{ item.unit }}</span>
                </div>
                <div class="label">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import {
  HomeFilled,
  MapLocation,
  Monitor,
  Warning,
  DataLine,
  Camera,
  Lock,
  Bell,
  Lightning,
  Sunny,
  Watermelon,
  Cloudy
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { asyncRoutes } from '@/router/index.js'
import { useRoute, useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
// 根据权限过滤可访问路由
const accessibleRoutes = computed(() => {
  return asyncRoutes.filter(route => 
    !route.meta.hidden && hasPermission(userStore.roles, route)
  )
})
// 标签切换方法
const switchTab = (tab) => {
  router.push(tab.path)
}

// 判断当前激活标签
const isActiveTab = (path) => {
  return route.path.startsWith(path)
}

// 模拟数据
const activeTab = ref(1)
const tabs = ref([
  { id: 1, label: '总览态势', icon: 'DataAnalysis' },
  { id: 2, label: '安防中枢', icon: 'Monitor' },
  { id: 3, label: '设备矩阵', icon: 'Setting' },
  { id: 4, label: '环境监测', icon: 'Cloudy' },
  { id: 5, label: '能源管理', icon: 'Lightning' }
])

const mapAreas = ref([
  { id: 1, name: '主入口', x: '15%', y: '45%', devices: 28, status: '正常', type: 'gate' },
  { id: 2, name: '数据中心', x: '40%', y: '30%', devices: 42, status: '警告', type: 'server' },
  { id: 3, name: '能源站', x: '70%', y: '60%', devices: 15, status: '正常', type: 'energy' },
  { id: 4, name: '物流中心', x: '55%', y: '20%', devices: 38, status: '正常', type: 'logistics' },
  { id: 5, name: '研发大楼', x: '30%', y: '70%', devices: 56, status: '警告', type: 'rd' },
  { id: 6, name: '停车场A区', x: '20%', y: '80%', devices: 12, status: '正常', type: 'parking' },
  { id: 7, name: '实验楼', x: '60%', y: '40%', devices: 22, status: '正常', type: 'lab' },
  { id: 8, name: '员工餐厅', x: '80%', y: '30%', devices: 8, status: '正常', type: 'canteen' }
])

const securityData = ref({
  updateTime: '22:45:36',
  items: [
    { id: 1, label: '门禁系统', value: '28/30正常', subtext: '2处异常', status: 'warning', icon: Lock },
    { id: 2, label: '视频监控', value: '95%在线', subtext: '3路离线', status: 'normal', icon: Camera },
    { id: 3, label: '消防设施', value: '全部正常', subtext: '0故障', status: 'normal', icon: Bell },
    { id: 4, label: '周界防护', value: '未触发', subtext: '3级警戒', status: 'normal', icon: Bell },
    { id: 5, label: '周界入侵', value: '0次报警', subtext: '24小时安全', status: 'normal', icon: 'Bell' },
    { id: 6, label: '电梯状态', value: '12/12正常', subtext: '0故障', status: 'normal', icon: 'Opportunity' },
    { id: 7, label: '门禁记录', value: '128次', subtext: '今日访问', status: 'normal', icon: 'Document' },
    { id: 8, label: '异常报警', value: '2次', subtext: '今日记录', status: 'warning', icon: 'Bell' }
  ]
})

const deviceStatus = ref([
  { name: '供能系统', health: 92, icon: Lightning },
  { name: '温控系统', health: 85, icon: Sunny },
  { name: '水循环系统', health: 78, icon: Watermelon },
  { name: '网络核心', health: 95, icon: 'Connection' },
  { name: '安防中控', health: 88, icon: 'Monitor' },
  { name: '门禁系统', health: 94, icon: 'Lock' },
  { name: '消防主机', health: 98, icon: 'Bell' },
  { name: '照明系统', health: 89, icon: 'Sunny' },
  { name: '通风系统', health: 91, icon: 'WindPower' },
  { name: '监控存储', health: 82, icon: 'VideoCamera' }
])

const dataStreams = ref([
  { label: '总能耗', value: '2.45', unit: 'MW', color: '#00f7ff', icon: Lightning },
  { label: '环境温度', value: '24.5', unit: '℃', color: '#ffd700', icon: Sunny },
  { label: '网络延迟', value: '38', unit: 'ms', color: '#00ff88', icon: 'Link' },
  { label: '存储占用', value: '64', unit: '%', color: '#ff003c', icon: 'Cpu' },
  { label: '用水量', value: '120', unit: 'm³', color: '#00bfff', icon: 'Watermelon' },
  { label: '空气质量', value: '优', unit: 'AQI', color: '#00ff88', icon: 'Cloudy' }
])

// 新增环境监测数据
const environmentData = ref([
  { label: 'PM2.5', value: '32', unit: 'μg/m³', color: '#00ff88', icon: 'Cloudy' },
  { label: '噪音', value: '55', unit: 'dB', color: '#ffd700', icon: 'Microphone' },
  { label: '温度', value: '24.5', unit: '℃', color: '#ffd700', icon: 'Sunny' },
  { label: '湿度', value: '65', unit: '%', color: '#00bfff', icon: 'Watermelon' },
  { label: '风速', value: '3.2', unit: 'm/s', color: '#00ff88', icon: 'WindPower' },
  { label: '光照', value: '1200', unit: 'lux', color: '#ffd700', icon: 'Sunny' }
])
// 添加加载状态
const isLoading = ref(true)
// 图表初始化
const healthChart = ref(null)
onMounted(() => {
  const chart = echarts.init(healthChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#0a1133',
        borderWidth: 4
      },
      data: [
        { value: 92, name: '正常设备', itemStyle: { color: '#00ff88' } },
        { value: 5, name: '需维护', itemStyle: { color: '#ffd700' } },
        { value: 3, name: '故障', itemStyle: { color: '#ff003c' } }
      ],
      label: {
          color: '#fff',
          fontSize: 14,
          formatter: '{b}: {d}%'
      }
    }]
  })
  // 模拟加载完成
  setTimeout(() => {
    isLoading.value = false
  }, 1000)

})

// 样式计算
const markerStyle = (area) => ({
  left: area.x,
  top: area.y,
  borderColor: statusColor(area.status)
})

const statusColor = (status) => 
  status === '正常' ? '#00ff88' : status === '警告' ? '#ffd700' : '#ff003c'

const iconStyle = (status) => ({
  color: statusColor(status),
  textShadow: `0 0 10px ${statusColor(status)}`
})


const healthColor = (value) =>
  value >= 90 ? '#00ff88' :
  value >= 70 ? '#ffd700' : '#ff003c'
</script>

<style lang="scss" scoped>
.overview-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at center, #0a1133 0%, #020617 100%);
  color: #fff;
}

.overview-header {
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: rgba(16, 24, 48, 0.95);
  border-bottom: 1px solid rgba(0, 247, 255, 0.2);

  .home-link {
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #00f7ff;
    text-decoration: none;
    transition: all 0.3s;

    &:hover {
      text-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
    }
  }

  .header-tabs {
    display: flex;
    margin-left: 40px;

    .tab-item {
      padding: 0 25px;
      height: 60px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #00f7ff;
        opacity: 0;
        transition: opacity 0.3s;
      }

      &.active {
        color: #00f7ff;
        text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);

        &::after {
          opacity: 1;
        }
      }

      &:hover {
        background: rgba(0, 247, 255, 0.1);
      }
    }
  }
}

.main-content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 20px;
  padding: 20px;
  overflow: auto;
  
  .map-section {
    height: 100%;
    min-height: 800px;
  }
  
  .core-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .data-section {
    height: 100%;
    overflow: auto;
  }
}

.cyber-card {
  background: rgba(16, 24, 48, 0.8);
  border: 1px solid rgba(0, 247, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(
      45deg,
      rgba(0, 247, 255, 0.1) 0%,
      rgba(0, 255, 136, 0.1) 50%,
      transparent 100%
    );
    z-index: -1;
  }
}

.title-glow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00f7ff;
  margin: 0 0 20px 0;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);

  .update-time {
    margin-left: auto;
    font-size: 0.9em;
    color: #7f95b4;
  }
}

.map-container {
  height: 100%;
  min-height: 500px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.1);
  border-radius: 8px;
  position: relative;

  .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;

    .pulse-effect {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 247, 255, 0.2);
      animation: pulse 2s infinite;
    }

    .marker-core {
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px currentColor;
    }
  }
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;

  .status-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .status-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-right: 15px;
    }

    .value {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.2em;
      color: #00f7ff;
    }

    .subtext {
      font-size: 0.9em;
      color: #7f95b4;
    }
  }
}

.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  .device-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;

    .device-icon {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }

    .progress-label {
      margin-bottom: 5px;
      color: #7f95b4;
    }

    .health-value {
      margin-left: auto;
      font-family: 'Orbitron', sans-serif;
    }
  }
}

.data-stream {
  display: grid;
  gap: 15px;

  .stream-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .stream-value {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.2em;

      .stream-unit {
        font-size: 0.8em;
        margin-left: 5px;
        color: #7f95b4;
      }
    }
  }
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
  
  .environment-item {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    
    .indicator {
      font-size: 24px;
      font-family: 'Orbitron', sans-serif;
      margin-bottom: 5px;
      
      .unit {
        font-size: 12px;
        margin-left: 3px;
      }
    }
    
    .label {
      color: #7f95b4;
      font-size: 12px;
    }
  }
}

// 新增滚动效果
.scroll-list {
  max-height: 400px;
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 6px;
    background: rgba(0,0,0,0.2);
  }
  
  &::-webkit-scrollbar-thumb {
    background: #409EFF;
    border-radius: 3px;
  }
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

// 新增滚动容器样式
.scroll-container {
  max-height: 100%;
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 6px;
    background: rgba(0,0,0,0.2);
  }
  
  &::-webkit-scrollbar-thumb {
    background: #409EFF;
    border-radius: 3px;
  }
}


// 添加加载状态样式
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 31, 63, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-top-color: #00f7ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  
  &::before, &::after {
    content: '';
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
  }
  
  &::before {
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-top-color: #00ff88;
    animation: spin 2s linear infinite;
  }
  
  &::after {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-top-color: #ffc600;
    animation: spin 3s linear infinite;
  }
}

</style>